<template>
  <BasicModal :title="title" v-bind="$attrs" @register="registerModal"
    :width="400" :canFullscreen="false" :centered="true" :destroyOnClose="true"
    :showCancelBtn="false" :showOkBtn="false" 
    :bodyStyle="{height:'calc(100vh - 250px)', overflow:'hidden'}"
  >
    <div style="zoom: 1; " :style="{height:'calc(100vh - 250px)', overflowY:'auto'}" >
      <ul class="company-list">
        <li v-for="(item, index) in identticals" :key="item.customerTel" 
          @click="setSearch(item)"
          :class="{ 'selected': model.customerTel === item.customerTel }"
        >
          <div class="card-details">
            <div class="detail-item w250">
              <i class="fa fa-user"></i>
              <span :class="model.name == item.customerName ? 'red' : ''">{{item.customerName}}</span>
            </div>
            <div class="detail-item w250">
              <i class="fa fa-phone"></i>
              <span :class="model.tel == item.customerLxdh ? 'red' : ''">{{item.customerLxdh||''}}</span>
            </div>
          </div>
          
          <div class="card-details">
            <i class="fa fa-adjust" style="margin-top: 6rpx; width: 22rpx;"></i>
            <span class="company-name" :title="item.companyPathName">{{item.companyPathName}}</span>
          </div>
          
          <div class="card-details" style="justify-content: space-between; margin-right: 10rpx;">
            <div class="detail-item">
              <i class="fa fa-clock-o" style="width: 22rpx;"></i>
              <Icon icon="ant-design:left-circle-outlined" />
              <span>最后更新: {{ item.customerGxsj }}</span>
            </div>
            <div class="detail-item">
              <!-- 右下角的序号 -->
              <div class="index-badge">{{ (index < 9) ? ('0' + (index + 1)) : (index + 1) }}</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </BasicModal>
</template>

<script lang="ts" name="BankModal" setup>
import { ref, computed, unref, reactive, onMounted, nextTick } from 'vue';
import { BasicModal, useModalInner } from "/@/components/Modal";
import { useMessage } from "/@/hooks/web/useMessage";
const $message = useMessage();

// 声明Emits
const emit = defineEmits(['success', 'register', 'setSearch']);

let identticals = reactive<any>([]);
let model = reactive<any>({});
let title = ref('');

// 表单赋值
const [registerModal, {closeModal}] = useModalInner(async (data) => {
  console.log(data.model) 
  Object.assign(model, data.model);
  Object.assign(identticals, data.lists);
  if (data.lists.length) {
    title.value = '发现'+data.lists.length+'条疑似重复的客户数据';
  }
});
  
function setSearch(item) {
  emit('setSearch', item);
  closeModal();
}

</script>

<style lang="less" scoped>
:deep(.ant-upload.ant-upload-select-picture-card) {
  width: 360px!important
}
</style>

<style lang="scss">
/* 基础样式 */
:root {
  --orange-500: #f97316;
  --orange-100: #ffedd5;
  --gray-800: #1f2937;
  --gray-600: #4b5563;
  --gray-500: #6b7280;
  --gray-400: #9ca3af;
  --gray-200: #bec8d7;
  --gray-50: #f9fafb;
}

/* 列表容器 */
.company-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 10px;
}

/* 卡片样式 */
.company-list li {
  background-color: var(--gray-50);
  padding: 4px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: white;

  overflow: hidden;
  transition: box-shadow 0.3s ease;
  cursor: pointer;
}

.company-list1 li:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.company-list li.selected {
  border: 2px solid var(--orange-500);
}

/* 卡片详情 */
.card-details {
  font-size: 14px;
  display: flex;
  flex-direction: row;
  gap: 5px;
  margin: 5px 0;
  position: relative;
}

.card-details i {
  color: var(--orange-500);
}

.detail-item {
  display: flex;
  align-items: center;
}

.detail-item i {
  width: 10px;
  text-align: center;
  margin-right: 5px;
  color: var(--orange-500);
}

.company-name {
  color: var(--gray-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}

.index-badge {
  width: 20px;
  height: 20px;
  line-height: 19px;
  border-radius: 50%;
  background-color: var(--orange-100);
  color: var(--orange-500);
  font-weight: 500;
  font-size: 12px;
  text-align: center;
}

.red {
  color: orangered;
  font-weight: 500;
}

</style>